<template>
	<view>
		<view class="cu-bar bg-white search fixed" style="top:0rpx;">
		  <view class="search-form round">
		    <text class="cuIcon-search"></text>
		    <input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
		  </view>
		  <view class="action">
		    <button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
		  </view>
		</view>
		<!-- <nodata ></nodata> -->
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+listCurID" style="height:calc(100vh - 110rpx);top:110rpx" scroll-with-animation="true" enable-back-to-top="true">
		  <block v-for="(item,index) in list" >
		    <view :class="'padding indexItem-'+list[index]" :id="'indexes-'+list[index]" :data-index="list[index]">{{list[index]}}</view>
		    <view class="cu-list menu-avatar no-padding">
		      <view class="cu-item" v-for="(item,index) in 2"  wx:for-index="sub">
		        <view class="cu-avatar round lg">{{list[index]}}</view>
		        <view class="content">
		          <view class="text-grey">{{list[index]}}
		            <text class="text-abc">{{list[sub]}}</text>君</view>
		          <view class="text-gray text-sm">
		            有{{sub+2}}个主子需要伺候
		          </view>
		        </view>
		      </view>
		    </view>
		  </block>
		</scroll-view>
		<view class="indexBar" style="height:calc(100vh - 50rpx - 50px)">
		  <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove="tMove">
		    <view class="indexBar-item" v-for="(item,index) in list" :id="index" @touchstart="getCur" @touchend="setCur">{{list[index]}}</view>
		  </view>
		</view>
		<!--选择显示-->
		<view :hidden="hidden" class="indexToast">
		  {{listCur}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				listCur:"",
				 hidden: true,
				 listCurID:""
			};
		},
		onLoad() {
		    let list = [];
		    for (let i = 0; i < 26; i++) {
		      list[i] = String.fromCharCode(65 + i)
		    }
		    this.list=list
		     this.listCur = list[0]
		  },
		   onReady() {
		      let that = this;
		      wx.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
		        that.boxTop = res.top
		      }).exec();
		      wx.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
		        that.barTop = res.top
		      }).exec()
		    },
			methods:{
				  getCur(e) {
				    this.hidden = false;
				    this.listCur=this.list[e.target.id]
				  },
				  setCur(e) {
				      this.hidden = true
				      this.listCur = this.listCur
				    },
					 //滑动选择Item
					  tMove(e) {
					    let y = e.touches[0].clientY,
					      offsettop = this.boxTop,
					      that = this;
					    //判断选择区域,只有在选择区才会生效
					    if (y > offsettop) {
					      let num = parseInt((y - offsettop) / 20);
					      this.listCur = that.list[num]
					    };
					  },
					
					  //触发全部开始选择
					  tStart() {
					    this.hidden = false
					  },
					
					  //触发结束选择
					  tEnd() {
					    this.hidden = true
					    this.listCurID = this.listCur
					  },
					  indexSelect(e) {
					    let that = this;
					    let barHeight = this.barHeight;
					    let list = this.list;
					    let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
					    for (let i = 0; i < list.length; i++) {
					      if (scrollY < i + 1) {
					        that.listCur = list[i]
					        that.movableY = i * 20
					        return false
					      }
					    }
					  }
			}
	}
</script>

<style lang="less">
.indexes {
  position: relative;
}

.indexBar {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 20rpx 20rpx 20rpx 60rpx;
  display: flex;
  align-items: center;
}

.indexBar .indexBar-box {
  width: 40rpx;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
}

.indexBar-item {
  flex: 1;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #888;
}

movable-view.indexBar-item {
  width: 40rpx;
  height: 40rpx;
  z-index: 9;
  position: relative;
}

movable-view.indexBar-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 10rpx;
  height: 20rpx;
  width: 4rpx;
  background-color: #f37b1d;
}

.indexToast {
  position: fixed;
  top: 0;
  right: 80rpx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin: auto;
  color: #fff;
  line-height: 100rpx;
  text-align: center;
  font-size: 48rpx;
}

</style>
